{include file="public/header"/}

<body>
<article class="page-container">
    <form  class="form form-horizontal" id="form-group-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="名称" name="name" id="name" style="width: 350px;">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="价格" id="priceId" name="price" style="width: 350px;">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开团人数：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="人数" name="number" id="numberId" style="width: 350px;">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <input id="fileId" type="file" name="pic" multiple="multiple" />
                </div>
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品属性：</label>
            <div class="formControls col-xs-8 col-sm-9">
                商品产地：<input type="text" class="input-text" value="" placeholder="来源产地" id="place" name="place" style="width: 280px;"><br/>
                商品规格：<input type="text" class="input-text" value="" placeholder="如：每个/约50g" id="specs" name="specs" style="width: 280px;"><br/>
                储存方式：<input type="text" class="input-text" value="" placeholder="如：冷藏" id="storage" name="storage" style="width: 280px;"><br/>
                营养价值：<input type="text" class="input-text" value="" placeholder="如：含有蛋白质" id="nutritive" name="nutritive" style="width: 280px;">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>团购结束时间：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="可选择：年、月、日、时、分、秒" id="datetime" name="datetime" style="width: 350px;" >
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否发布：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="state" type="radio" value="0" checked>
                    <label>发布</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="state" value="1">
                    <label>不发布</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span> 商品详情图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                1、<input id="fileI1" type="file" name="img[]" multiple="multiple"/> <br>
                2、<input id="fileI2" type="file" name="img[]" multiple="multiple"/> <br>
                3、<input id="fileI3" type="file" name="img[]" multiple="multiple"/> <br>
                4、<input id="fileI4" type="file" name="img[]" multiple="multiple"/> <br>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品详情：</label>
            <div class="formControls col-xs-8 col-sm-9" >
                <textarea id="editor" type="text" name="content" value="" style="width:655px;height:300px;"></textarea>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>
{include file="public/footer"/}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="__STATIC__/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>

<script src="__STATIC__/admin/laydate/laydate.js"></script>

<script type="text/javascript">
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        // 日期时间选择器
        laydate.render({
            elem: '#datetime'
            ,type: 'datetime' //默认，可不填
            ,min:minDate()
        });
        function minDate(){
            var now = new Date();
            return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();

        }


        $("#form-group-add").validate({
            rules:{
                name:{
                    required:true,
                    minlength:2,
                    maxlength:16
                },
                price:{
                    required:true,
                },
                number:{
                    required:true,
                },
                place:{
                    required:true,
                },
                specs:{
                    required:true,
                },
                storage:{
                    required:true,
                },
                nutritive:{
                    required:true,
                },
                datetime:{
                    required:true,
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form) {
                var files = document.getElementById('fileId').files;
                var fileSize = 0;
                if (files.length != 0) {
                    fileSize = files[0].size;
                }
                if (fileSize > 2567800) {
                    layer.msg('图片不能大于2M', {icon: 2, time: 2000});
                    return false;
                }

                var value = document.getElementById("priceId").value;
                var reg=/^(\d+|\d+\.\d{1,4})$/; // 注意：故意限制了 0321 这种格式，reg=/^[1-9]\d*$|^0$/如不需要，直接reg=/^\d+$/;
                if(!reg.test(value))
                {
                    layer.msg('商品价格只能为数字！', {icon: 2, time: 2000});
                    return;
                }

                var value = document.getElementById("numberId").value;
                var reg=/^[1-9]\d*$|^0$/; // 注意：故意限制了 0321 这种格式，reg=/^[1-9]\d*$|^0$/如不需要，直接reg=/^\d+$/;
                if(!reg.test(value))
                {
                    layer.msg('团购人数只能为整数！', {icon: 2, time: 2000});
                    return;
                }

                if(document.getElementById("fileId").value == null || document.getElementById("fileId").value == "")
                {
                    layer.msg('商品图片不能为空！', {icon: 2, time: 2000});
                    return;
                }

                if(document.getElementById("fileI1").value == null || document.getElementById("fileI1").value == "")
                {
                    layer.msg('1、商品详情页图片不能为空！', {icon: 2, time: 2000});
                    return;
                }

                var filei1 = document.getElementById('fileI1').files;
                var fileSizei1 = 0;
                if (filei1.length != 0) {
                    fileSizei1 = filei1[0].size;
                }
                if (fileSizei1 > 2567800) {
                    layer.msg('图片不能大于2M', {icon: 2, time: 2000});
                    return false;
                }


                var filei2 = document.getElementById('fileI2').files;
                var fileSizei2 = 0;
                if (filei2.length != 0) {
                    fileSizei2 = filei2[0].size;
                }
                if (fileSizei2 > 2567800) {
                    layer.msg('图片不能大于2M', {icon: 2, time: 2000});
                    return false;
                }

                var filei3 = document.getElementById('fileI3').files;
                var fileSizei3 = 0;
                if (filei3.length != 0) {
                    fileSizei3 = filei3[0].size;
                }
                if (fileSizei3 > 2567800) {
                    layer.msg('图片不能大于2M', {icon: 2, time: 2000});
                    return false;
                }
                var filei4 = document.getElementById('fileI4').files;
                var fileSizei4 = 0;
                if (filei4.length != 0) {
                    fileSizei4 = filei4[0].size;
                }
                if (fileSizei4 > 2567800) {
                    layer.msg('图片不能大于2M', {icon: 2, time: 2000});
                    return false;
                }


                var t = $('textarea').val();  //判断textarea标签是否填写
                if (t =='') {
                    layer.msg('商品详情内容不能为空！',{icon:2,time:2000});
                    return false;
                }
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "groupAdd" ,
                    success: function(data){
                        if (data.code == 403) {
                            layer.msg('添加失败！',{icon:2,time:1000});
                            return false;
                        }
                        if (data.code == 200){
                            layer.msg('添加成功！',{icon:1,time:2000});
                            // return false;
                            setTimeout(function () {
                                window.parent.location.reload();
                                parent.layer.close();
                            },1000);
                        }
                    },
                });
            }
        });
        var ue = UE.getEditor('editor');
    });

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>